<template>
  <FullscreenCard class="wrapper">
    <div class="grid" ref="charDom"/>
	</FullscreenCard>
</template>

<script setup lang="ts">
import * as echarts from 'echarts'
import FullscreenCard from '@/components/FullscreenCard'

const codeSelectVisible = ref<Boolean>(false)

const charDom = ref<any>([])

const dataList = [{
  id: '1',
  name: '密度',
  data: [
    [0.2, 500],
    [0.6, 900],
    [0.4, 1100],
    [0.7, 1300],
    [1.5, 2200],
    [1.7, 2100],
  ]
}, {
  id: '2',
  name: '漏斗',
  data: [
    [0.3, 600],
    [0.6, 1000],
    [0.4, 1200],
    [0.7, 1400],
    [1.5, 1600],
    [1.8, 2400],
  ]
}, {
  id: '3',
  name: '初切',
  data: [
    [0.4, 400],
    [0.6, 800],
    [0.4, 1000],
    [0.7, 1200],
    [1.5, 1400],
    [0.8, 2000],
  ]
}, {
  id: '4',
  name: '动切',
  data: [
    [0.4, 400],
    [0.6, 800],
    [0.4, 1000],
    [0.7, 1200],
    [1.5, 1400],
    [0.8, 2000],
  ]
}, {
  id: '5',
  name: '终切',
  data: [
    [0.5, 300],
    [0.6, 700],
    [0.4, 1300],
    [0.7, 1500],
    [1.5, 1700],
    [0.8, 2600],
  ]
}, {
  id: '6',
  name: '塑性',
  data: [
    [0.7, 100],
    [0.5, 400],
    [0.4, 600],
    [0.7, 1100],
    [1.5, 1200],
    [0.8, 2100],
  ]
}]

const rawData:any = [
  [0, 140, 210, 250, 210, 260, 320],
  [1, 180, 240, 280, 240, 330, 370],
  [2, 220, 310, 360, 280, 370, 430],
  [3, 250, 320, 380, 340, 390, 480],
  [4, 290, 380, 470, 330, 440, 570],
  [5, 290, 350, 490, 340, 430, 570],
]
const dataByList = dataList.map((v, i) => [i, ...v.data.map(_ => _[1])])
const dataByListX = dataList.map((v, i) => [i, ...v.data.map(_ => _[0])])
console.log('dataByList', dataByList, dataByListX)


const renderItem = (params:any = {}, api:any = {}) => {
  const categoryIndex = api.value(0)
  // console.log('categoryIndex', categoryIndex)
  const points = dataByList.map((v:any, index:any) => {
    // const _x = 0.85
    const _x = dataByListX[categoryIndex][index]
    console.log('_x',_x);
    
    const unitBandWidth = (api.size([0, 0])[0] * _x) / (dataByList.length - 1)
    const value = api.value(index + 1)
    console.log('categoryIndex value', categoryIndex, value);
    
    const point = api.coord([categoryIndex, value])
    point[0] += unitBandWidth * (index - dataByList.length / 2 - 1) + unitBandWidth * _x
    return point
  })
  console.log('points',categoryIndex, points)
  return {
    type: 'polyline',
    transition: ['shape'],
    shape: {
      points,
    },
    style: api.style({
      fill: null,
      stroke: api.visual('color'),
      lineWidth: 3
    })
  }
}
const data = [["4000", 116], ["3500", 129], ["3000", 135], ["2500", 86], 
["2000", 73], ["1500", 85], ["1000", 73], ["500", 68], ["0", 92]];
const dateList = data.map(function (item) {
  return item[0];
});
const valueList = data.map(function (item) {
  return item[1];
});

const initChart = () => {
  const myChart = echarts.init(charDom.value)
  const option =  {
    tooltip: {
      trigger: 'axis'
    },
    axisPointer: {
      link: [
        {
          xAxisIndex: 'all'
        }
      ]
    },
    grid: [
      {
        left: '5%',
        width: '15%',
      },
      {
        left: '20%',
        width: '15%',
      },
      {
        left: '35%',
        width: '15%',
      }
    ],
    yAxis: [
      {
        data: dateList,
        gridIndex: 0,
        show: true,
        min: 0,
        // 分割线
        splitLine: { 
          show: true,
          lineStyle: {
            type: 'dashed' 
          }
        },
        // 坐标轴线
        axisLine: { show: true },
        // 刻度线
        axisTick: { show: false },
      },
      {
        data: dateList,
        gridIndex: 1,
        show:true, 
        min: 0,
        // 分割线
        splitLine: { 
          show: true,
          lineStyle: {
            type: 'dashed' 
          }
        },
        // 坐标轴线
        axisLine: { show: true },
        // 刻度线
        axisTick: { show: false },
      },
      {
        data: dateList,
        gridIndex: 2,
        show:true, 
        min: 0,
        // 分割线
        splitLine: { 
          show: true,
          lineStyle: {
            type: 'dashed' 
          }
        },
        // 坐标轴线
        axisLine: { show: true },
        // 刻度线
        axisTick: { show: false },
      }
    ],
    xAxis: [
      {
        show: false,
        gridIndex: 0,
        boundaryGap: false,
        // 分割线
        splitLine: { show: false },
        // 坐标轴线
        axisLine: { show: false },
        // 刻度线
        axisTick: { show: false },
      },
      {
        show: false,
        gridIndex: 1,
        boundaryGap: false,
        // 分割线
        splitLine: { show: false },
        // 坐标轴线
        axisLine: { show: false },
        // 刻度线
        axisTick: { show: false },
      },
      {
        show: false,
        gridIndex: 2,
        boundaryGap: false,
        // 分割线
        splitLine: { show: false },
        // 坐标轴线
        axisLine: { show: false },
        // 刻度线
        axisTick: { show: false },
      }
    ],
    
    series: [
      {
        type: 'line',
        showSymbol: false,
        data: valueList,
        xAxisIndex: 0,
        yAxisIndex: 0
      },
      {
        type: 'line',
        showSymbol: false,
        data: valueList,
        xAxisIndex: 1,
        yAxisIndex: 1
      },
      {
        type: 'line',
        showSymbol: false,
        data: valueList,
        xAxisIndex: 2,
        yAxisIndex: 2
      }
    ]
  }

  myChart.setOption(option)

  window.addEventListener('resize', () => {
    myChart.resize()
  })
}

onMounted(() => {
  initChart()
})
</script>

<style lang="scss" scoped>
.wrapper {
  padding: 20px;
	background-color: var(--vt-c-white);
}
.grid {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}
</style>
